<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <title>喰星云客户端</title>


    <style type="text/css">
        body {
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 13px;
            -webkit-touch-callout: none;
        }

        p {
            padding: 0;
            margin: 0;
        }

        a {
            text-decoration: none;
        }

        .guide {
            position: fixed;
            top: 0;
            width: 100%;
            height: 3rem;
            /* background: #323232; */
            background: #000;
            text-align: center;
            font-weight: bold;
            opacity: 0.7;
            /* border-top: 3px solid #000; */
        }

        .guide .guideFont {
            display: inline-block;
            text-align: left;
            margin-top: .4rem;
            background: url('/images/icon-guide.png') no-repeat 14.5rem;
            background-size: 12%;
            padding: 0 2rem;
            /* width: 80%; */
        }

        .contentBox {
            left: 5%;
            margin-top: 3rem;
            text-align: center;
        }

        .contentBox .downloadBox {
            /* margin: 2.8rem 0; */
            margin: 2.6rem 0 1.3rem 0;
        }

        .contentBox .downloadBtn {
            display: inline-block;
            padding: .45rem 2.75rem;
            background: #11B7F3;
            border-radius: .615rem;
        }
        .contentBox .loadingWordTip{
            color: #11B7F3;
            margin-top: .4rem;
        }
        .iosShowInfor span {
            color: #ff0000;
            border-bottom: 1px solid #ff0000;
        }
        .fbui-modal {
            width: 13rem;
            height: 9rem;
            background: #fff;
            /* margin-left: 10%; */
            top: 50%;
            left: 50%;
            position: absolute;
            margin-left: -6.5rem;
            margin-top: -4rem;
            box-shadow: 0 2px 9px #999;
            border-radius: .6rem;
            font-weight: bold;
            text-align: center;
            font-size: .9rem;
            color: #333;
        }

        .dis-block {
            display: block;
        }

        .font-white {
            color: #fff;
        }

        .font-gray-three {
            color: #333;
        }

        .font-gray-nine {
            color: #999;
        }

        .size-small {
            font-size: 1.03rem;
        }

        .size-middle {
            font-size: 1.13rem;
        }

        .fbui-modal.prompt .header {
            height: 2.5rem;
            line-height: 2.5rem;
        }

        .fbui-modal.prompt .body {
            text-align: center;
            height: 4rem;
            line-height: 20px;
            width: 84%;
            margin-left: 8%;
            font-size: .7rem;
        }

        .fbui-modal.prompt .footer {
            text-align: center;
            line-height: 2.5rem;
            border-top: 1px solid #eee;
        }

        .fbui-modal.prompt .footer .fbui-btn {
            color: #11b7f3;

        }

    </style>
</head>

<body>
<!-- <div class="guide font-white"><span>点击右上角按钮，然后在弹出的菜单<br/>中点击Safari，打开即可安装</span></div> -->
<div class="guide font-white"><span class="guideFont">点击右上角按钮，点击菜单中的浏览<br/>器按钮，即可下载</span></div>
<div class="contentBox">
    <img src="/images/logo-phone.png">
    <p style="margin-top: 1rem;" class="size-middle font-gray-three">喰星云供应链客户端下载</p>
    <p style="margin-top: .5rem;" class="font-gray-nine">版本：<span class="app-version"></span>&nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp;大小：<span
            class="app-size"></span></p>
    <div class="downloadBox">
        <a href='javascript:void(0);' class="downloadBtn font-white size-middle">点击下载</a>
        <p style="visibility:hidden;" class="loadingWordTip">若已安装，请按home键返回桌面查看</p>
        <!-- <img style="display:none;" width='50rem' class="loadingIcon" src="/images/loading.gif"/>
        <span style="display:none;" class="loadingWordTip size-small">正在安装，请按home键返回桌面查看</span> -->
    </div>
    <a href='./iosprompt.jsp' class="dis-block size-small font-gray-nine iosShowInfor"><span>iOS首次安装企业版应用前必读</span></a>
    <div id="qrcode" style="display:inline-block;margin-top:1.07rem;"></div>
    <!-- <img style="margin-top:1.07rem;" class="" src="/logistics/inc/images/logo-phone.png"> -->
    <p style="margin-top:.5rem;" class="font-gray-three size-small">适用于<span class="device-name"></span>设备</p>
</div>
</body>
<script type="text/javascript" src="/jquery/jquery-2.1.0.js"></script>
<!-- <script type="text/javascript" src="html/js/qrcode.min.js"></script> -->

<script type="text/javascript" src="/jquery/jquery.qrcode.js"></script>
<script type="text/javascript" src="/jquery/utf.js"></script>

<script type="text/javascript">
    var messageBox = {
        confirm: function (opt) {
            // var html = '<div class=\"fbui-modal prompt\">' + '<div class=\"bg-cover\"></div>' + '<div class=\"modal-container\" style=\"width:300px;height:200px;display:block;margin-left:-150px;margin-top:-100px\">' + '<div class=\"header\">' + '<span class=\"logo left\"></span>' + '<span class=\"left title\">' + opt.title + '</span>' + '<span class=\"modal_operate\">' + '<span class=\"close mouse_pointer right\" title=\"关闭\">×</span>' + '</span>' + '<div class=\"clear\"></div>' + '</div>' + '<div class=\"body\">' + opt.text + '</div>' + '<div class=\"footer clearfix\">' + '<a class=\"fbui-btn close\" href=\"javascript:void(0);\">取消</a>' + '<a class=\"fbui-btn fbui-btn-red\" href=\"javascript:void(0);\">确定</a>' + '</div>' + '</div>' + '</div>'
            var html = '<div class=\"fbui-modal prompt\">' + '<div class=\"bg-cover\"></div>' + '<div class=\"modal-container\">' + '<div class=\"header\">' + '<span class=\"logo left\"></span>' + '<span class=\"left title\">' + opt.title + '</span>' + '<div class=\"clear\"></div>' + '</div>' + '<div class=\"body\">' + opt.text + '</div>' + '<div class=\"footer clearfix\">' + '<a class=\"fbui-btn close\" href=\"javascript:void(0);\">取消</a>' + '<a class=\"fbui-btn fbui-btn-red\" style=\"display:inline-block;width: 100%;\" href=\"javascript:void(0);\">确&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;定</a>' + '</div>' + '</div>' + '</div>'
            var $dialog = $(html);
            $('body').append($dialog);
            $('body .fbui-modal.prompt').show();
            $dialog.find('.fbui-btn-red,.fbui-btn.close,.mouse_pointer.close').unbind().click(function () {
                $dialog.remove();
            });
            if (opt.hiddenCancel) {
                $dialog.find('.fbui-btn.close').hide();
            }
            $dialog.find('.fbui-btn-red').click(function () {
                opt.success && opt.success.apply(this, arguments);
            });

            $dialog.find('.fbui-btn.close').click(function () {
                opt.close && opt.close.apply(this, arguments);
            });
        },
        showLoading: function () {
            $(".fakeloader").show();
        },
        hideLoading: function () {
            $(".fakeloader").hide();
        }
    };

    //请求下载信息的参数
    var href = top.location.href,
        infor = GetArgsFromHref(href),
        url= href.split('/homePage.jsp?')[0];
    
    //Android ios判断
    var u = navigator.userAgent,
        ua = navigator.userAgent.toLowerCase(),
        isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
        isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
        phoneName = '',
        guideFont = '',
        isWXQQ = ua.match(/MicroMessenger/i) == 'micromessenger' || ua.match(/QQ\//i) == 'qq/';
    !isWXQQ && $('.guide').hide() && $('.contentBox').css('margin-top','.2rem');
    $.ajax({
        type: 'POST',
        contentType: 'application/x-www-form-urlencoded;charset=utf-8',
        url: url + '/app/downInfo',
        data: JSON.stringify({
            version: infor.version,
            type: isiOS ? '01' : '02',
            source: infor.source
        }),
        success: function (html) {
            
            var res = $.parseJSON(html);
            if (res.code == 0) {    //code 0成功 1失败
                var data = res.data;
                //版本、大小、下载信息地址
                $('.app-version').html(data.appVersion);
                $('.app-size').html(data.size);
                // $('.downloadBtn').attr('href', data.url);
                $('.downloadBtn').on('click',function(){
                    if(data.url && !isWXQQ){
                        if(isiOS){
                            // $('.downloadBtn').hide();
                            // $('.loadingIcon').show();
                            // setTimeout(function(){ 
                            //     $('.loadingIcon').hide();
                            //     $('.loadingWordTip').show();
                            // }, 2500);
                            $('.downloadBtn').html('重新安装');
                            $('.loadingWordTip').css({'visibility':'visible'});
                        }else{
                            $('.downloadBtn').html('正在下载...');
                        };
                        location.href= data.url;
                    };
                });
            } else {
                var msg = res.msg ? res.msg : '获取失败';
                messageBox.confirm({
                    title: '提示',
                    text: msg,
                    hiddenCancel: true
                })
            };
        }
    });

    if (isiOS) {
        phoneName = 'iOS';
        guideFont = '点击右上角按钮，然后在弹出的菜单<br/>中点击Safari，打开即可安装';
        btnWord= '点击安装';
    } else {
        guideFont = '点击右上角按钮，点击菜单中的浏览<br/>器按钮，即可下载';
        phoneName = 'android';
        btnWord= '点击下载';
        $('.iosShowInfor').hide();
    }
    $('.guideFont').html(guideFont);
    $('.device-name').html(phoneName);
    $('.downloadBtn').html(btnWord);

    $("#qrcode").qrcode({
        render: "canvas",    //设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好
        text: href,    //扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接
        width: "100",               //二维码的宽度
        height: "100",              //二维码的高度
        background: "#ffffff",       //二维码的后景色
        foreground: "#000000",        //二维码的前景色
        src: '/images/code-logo.png'             //二维码中间的图片
    });


    //点击下载
    $('.downloadBtn').on('click',function(){
        if(isWXQQ){
            var text= isiOS ? '点击右上角按钮，然后在弹出的菜单中点击Safari，打开即可安装' : '点击右上角按钮，点击菜单中的浏览器按钮，即可下载';
            messageBox.confirm({
                title: '提示',
                text: text,
                hiddenCancel: true
            });
        };
    });


    function GetArgsFromHref(sHref, sArgName) {
        var args = sHref.split("?");
        var retval = {};

        if (args[0] == sHref) /*参数为空*/
        {
            return retval;
            /*无需做任何处理*/
        }
        var str = args[1];
        args = str.split("&");
        for (var i = 0; i < args.length; i++) {

            str = args[i];
            var arg = str.split("=");
            if (arg.length <= 1) continue;
            retval[arg[0]] = unescape(arg[1]);
            // if(arg[0] == sArgName) retval = arg[1]; 
        }
        return retval;
    };
</script>
</html>

